<template>
  <div class="unitInfo-tableContainer">
    <div class="unitInfo-tableTitle">
      <h2>{{yearText}}年临安区公共机构机房能耗申报汇总表(按单位)</h2>
      <span>
        【 汇总年份：
        <el-date-picker v-model="yearText" type="year" value-format="yyyy" placeholder="选择年" style="width:100px;" @change="getDetail()">
        </el-date-picker>&nbsp;&nbsp;&nbsp;
        <el-checkbox v-model="checked" @change="getDetail()">汇总至一级单位(含下属二级单位)</el-checkbox> 】
      </span>
    </div>
    <div class="unitInfo-tableContent">
      <table width="120%" border="1" cellpadding="10">
        <tr>
          <td align="center" valign="middle" width="60">序号</td>
          <td align="center" valign="middle">单位</td>
          <td align="center" valign="middle">机房数量<br/>(个)</td>
          <td align="center" valign="middle">机房面积<br/>(平方米)</td>
          <td align="center" valign="middle">机柜数量<br/>(个)</td>
          <td align="center" valign="middle">总功率<br/>(千瓦)</td>
          <td align="center" valign="middle">IT设备功率<br/>(千瓦)</td>
          <td align="center" valign="middle">空调设备功率<br/>(千瓦)</td>
          <td align="center" valign="middle">配电及其他功率<br/>(千瓦)</td>
          <td align="center" valign="middle">UPS容量<br/>(千伏安)</td>
          <td align="center" valign="middle">总用电量<br/>(千瓦时)</td>
          <td align="center" valign="middle">IT设备用电量<br/>(千瓦时)</td>
          <td align="center" valign="middle">空调用电量<br/>(千瓦时)</td>
          <td align="center" valign="middle">照明及其他用电<br/>(千瓦时)</td>
          <td align="center" valign="middle">其他能源消耗量<br/>(吨标准煤)</td>

        </tr>
        <tr :key="index" v-for="(item ,index) in energyData">
          <td align="center" valign="middle">{{index+1}}</td>
          <td align="center" valign="middle">{{item.DepartmentName}}</td>
          <td align="center" valign="middle">{{item.Count||0}}</td>
          <td align="center" valign="middle">{{item.Area||0}}</td>
          <td align="center" valign="middle">{{item.CabinetCount||0}}</td>
          <td align="center" valign="middle">{{item.TotalPower||0}}</td>
          <td align="center" valign="middle">{{item.ComputerPower||0}}</td>
          <td align="center" valign="middle">{{item.AirConditionerPower||0}}</td>
          <td align="center" valign="middle">{{item.OtherPower||0}}</td>
          <td align="center" valign="middle">{{item.UPSCapacitance||0}}</td>
          <td align="center" valign="middle">{{item.TotalPowerUsage||0}}</td>
          <td align="center" valign="middle">{{item.ComputerPowerUsage||0}}</td>
          <td align="center" valign="middle">{{item.AirConditionerPowerUsage||0}}</td>
          <td align="center" valign="middle">{{item.OtherElectricityConsumption||0}}</td>
          <td align="center" valign="middle">{{item.OtherConsumption||0}}</td>
        </tr>
        <tr v-if="energyData.length==0">
          <td align="center" colspan="15" valign="middle">暂无数据</td>
        </tr>
      </table>
      <div class="table-button">
        <a class="downLoad" :href="exportUrl">导出</a>
        <!--<el-button size="mini">打印</el-button>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      yearText: new Date().getFullYear() + '',
      checked: true,
      isGetting: false,
      exportUrl: '',
      energyData: []
    }
  },
  methods: {
    async getDetail() {
      this.exportUrl = `${this.baseUrl}/api/ComputerRoom/statistic?year=${this.yearText}&includeChild=${this.checked}&export=true`
      this.energyData = []
      const result = await this.$get("/api/ComputerRoom/statistic", {
        year: this.yearText,
        includeChild: this.checked
      })
      console.log(result, '123')
      if (result.length > 0) {
        this.energyData = result
        this.isGetting = true
        console.log(this.energyData)
      }
    },
    calculate(num) {
      if (this.isGetting) {
        if (num) return num.toFixed(2)
        return 0
      }
    }
  },
  created() {
    this.showHome.isShow = false;
    this.exportUrl = `${this.baseUrl}/api/ComputerRoom/statistic?year=${this.yearText}&includeChild=${this.checked}&export=true`
    this.getDetail()
  }
}
</script>
<style lang="scss" scoped>
.unitInfo-tableContainer {
  width: 100%;
  padding: 20px 15px;
}

.unitInfo-tableTitle {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 25px;
  h2 {
    font-size: 16px;
    margin-bottom: 10px;
  }
  span {
    font-size: 16px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    margin-top: 5px;
    font-weight: bold;
  }
}

.unitInfo-tableInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 25px;
  color: #606266;
}

.unitInfo-tableContent {
  width: 100%;
  overflow: auto;
  .table-titles {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    span {
      margin-right: 200px;
    }
  }
  table {
    color: #606266;
    border: 1px solid #ebeef5;
    td {
      padding: 6px 0px;
    }
    tr.table-row {
      height: 45px;
    }
  }
}

.table-footers {
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  .tableFooter-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 25px;
    .tableFooter-col {
      flex: 1;
    }
  }
}

.table-button {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

a.downLoad {
  display: inline-block;
  border: 1px solid #99D3F5;
  border-radius: 4px;
  padding: 4px 18px;
  color: #1E88C7;
  text-indent: 0;
  font-size: 14px;
  line-height: 20px;
  margin-left: 20px;
}
</style>



